<template>
    <div class="index" v-wechat-title="$route.meta.title">
        <div class="container">
            <keep-alive>
                <router-view/>
            </keep-alive>
        </div>
        <cube-tab-bar
                v-model="currentValue"
                :data="tabs"
                @change="changeHandler">
            <cube-tab v-for="(item, index) in tabs"
                      :label="item.value"
                      :key="item.value">
                <badge class=" new-app" v-if="(item.value === '/mine' || item.value === '/matchmakerMine') && isAppUpdate" type="danger" text="1"></badge>
                <div v-if="currentValue===item.value" class="tab-icon-active">
                    <!-- name为icon的插槽 -->
                    <div class="tab-icon" slot="icon">
                        <badge class="chat-badge" v-if="socket.noReadCount >0&&item.value === '/chatList'" type="danger" :text="String(socket.noReadCount)"></badge>
                        <img class="svg-icon" :src="item.icon">
                    </div>
                    <!-- 默认插槽 -->
                    {{item.label}}
                </div>
                <div v-else class="tab-icon-normal">
                    <!-- name为icon的插槽 -->
                    <div class="tab-icon" slot="icon">
                        <badge class="chat-badge" v-if="socket.noReadCount >0&&item.value === '/chatList'" type="danger" :text="String(socket.noReadCount)"></badge>
                        <img class="svg-icon" :src="item.icon">
                    </div>
                    <!-- 默认插槽 -->
                    {{item.label}}
                </div>
            </cube-tab>
        </cube-tab-bar>
    </div>
</template>

<script lang="ts">
    import {Component, Prop, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import {State, Action} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import Badge from "@/components/aui/Badge.vue";
    import {InterfaceSocket} from "@/interface/InterfaceSocket";
    import Http from "@/service/Http";
    import {updateNetVersionName} from "@/store/dispatches";

    @Component({
        components: {
            Badge
        },
    })
    export default class Index extends Scene {
        private currentValue: string = "/";
        @State("UserStore")
        private user!: InterfaceUser;

        @State("SocketStore")
        private socket!: InterfaceSocket;

        @State("DeviceStore")
        private device!: any;

        private get isAppUpdate(): boolean {
            if (this.device.status) {
                if (Number(this.device.netVersionCode) > Number(this.device.versionCode)) {
                    AppUpdate.checkAppUpdate((e: any) => {
                        this.updateAppCb(e);
                    }, (e: any) => {
                        this.updateAppCb(e);
                    }, this.api.appVersion);

                    return true;
                }
                return false;
            }
            return false;
        }

        private activated() {
            this.currentValue = this.$route.path;
        }

        private updateAppCb(res: any) {
            let option: any = {
                type: "error",
                txt: "未知错误"
            };
            if (res.hasOwnProperty("code")) {
                if (res.code !== 201) {
                    switch (res.code) {
                        case 202:
                            option.type = "correct";
                            option.txt = "当前已经是最新版本了,软件不需要更新";
                            break;
                        case 203:
                            option.type = "warn";
                            option.txt = "软件正在更新";
                            break;
                        case 301:
                            option.type = "error";
                            option.txt = "版本文件解析错误";
                            break;
                        case 302:
                            option.type = "error";
                            option.txt = "版本文件对比错误";
                            break;
                        case 404:
                            option.type = "error";
                            option.txt = "版本文件未找到";
                            break;
                        case 405:
                            option.type = "error";
                            option.txt = "网络出错，请确认网络";
                            break;
                        case 601:
                            option.type = "error";
                            option.txt = "网络出错，请确认网络";
                            break;
                        default:
                            option.type = "error";
                            option.txt = "未知错误";
                    }
                    (<any> this).$createToast({
                        ...option,
                        time: 2000,
                    }).show();
                }
            }
        }

        // private mounted(): void {
        //     this.currentValue = this.$route.path;
        // }

        private changeHandler(value: string): void {
            this.currentValue = value;
            this.switchTab({
                path: value
            });

            Http.read(this.api.appVersion).then((res) => {
                const xmlConvert = require("xml-js");
                const result1 = JSON.parse(xmlConvert.xml2json(res, {compact: true, spaces: 4}));
                updateNetVersionName(result1.update.version._text);
                console.log(result1.update.version._text);
            });
            // if you clicked different tab, this methods can be emitted
            // console.log(value)
        }

        public get tabs(): Array<object> {
            if (this.user.type == 1) {
                return [{
                    value: "/",
                    label: "邂逅",
                    icon: require("@/assets/icon/xiehuo.png")
                }, {
                    value: "/mall",
                    label: "商城",
                    icon: require("@/assets/icon/shangcheng.png")
                }, {
                    value: "/friend",
                    label: "交友",
                    icon: require("@/assets/icon/jiaoyou.png")
                }, {
                    value: "/chatList",
                    label: "消息",
                    icon: require("@/assets/icon/xiaoxi.png")
                }, {
                    value: "/mine",
                    label: "我的",
                    icon: this.user.gender === 2 ? require("@/assets/icon/xinliang.png") : require("@/assets/icon/xinlang.png")
                }];
            } else {
                return [{
                    value: "/",
                    label: "单身市场",
                    icon: require("@/assets/icon/danshen.png")
                }, {
                    value: "/mall",
                    label: "商城",
                    icon: require("@/assets/icon/shangcheng.png")
                }, {
                    value: "/chatList",
                    label: "消息",
                    icon: require("@/assets/icon/xiaoxi.png")
                }, {
                    value: "/matchmakerMine",
                    label: "我的",
                    icon: this.user.gender === 2 ? require("@/assets/icon/xinliang.png") : require("@/assets/icon/xinlang.png")
                }];
            }
        }
    }
</script>

<style scoped lang="stylus">
    .index
        max-height 100vh;
        max-width 100vw;
        overflow hidden;

    .container
        height calc(100vh - 47px - var(--safe-area-inset-bottom));

    .tab-icon
        width 24px;
        height 22px;
        font-size 22px;
        text-align center;
        margin -1px auto 2px auto;
        position relative;

    .tab-icon-active
        filter grayscale(0) !important;
        -moz-filter grayscale(0) !important;
        -ms-filter grayscale(0) !important;
        -o-filter grayscale(0) !important;
        -webkit-filter grayscale(0) !important;

    .tab-icon-normal
        -webkit-filter grayscale(100%);
        -moz-filter grayscale(100%);
        -ms-filter grayscale(100%);
        -o-filter grayscale(100%);
        filter grayscale(100%);

    .cube-tab-bar
        border-top 1px solid #ddd
        padding-bottom var(--safe-area-inset-bottom);
        background #ffffff;

        >>> .cube-tab
            font-size 12px
            position relative;

            >>> div
                -webkit-filter grayscale(100%);
                -moz-filter grayscale(100%);
                -ms-filter grayscale(100%);
                -o-filter grayscale(100%);
                filter grayscale(100%);

            >>> i
                font-size 22px

            >>> div
                margin-top 2px

    .chat-badge
        position absolute;
        top -5px;
        right -8px;
        z-index 40;
        transform scale(.8)

    .svg-icon
        width 1em;
        height 1em;
        overflow hidden;
        display block;
        margin-bottom 3px;
        padding-bottom 3px;
        box-sizing content-box

    .new-app
        position absolute;
        color rgba(0, 0, 0, 0);
        right 50%;
        margin-right -16px;
        top 0 !important;
        transform scale(.4)

</style>
